<template>
	<view class="birthday">
		<view class="line"></view>
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">
				当前选择
			</view>
			<view class="uni-list-cell-db">
				<picker mode="date" class="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const date=ref("2000-8-9")
	const startDate=getDate("start")
	const endDate=getDate("end")
	const bindDateChange=(e)=>{
		date.value=e.detail.value
	}
	function getDate(type) {
	            const date = new Date();
	            let year = date.getFullYear();
	            let month = date.getMonth() + 1;
	            let day = date.getDate();
	
	            if (type === 'start') {
	                year = year - 60;
	            } else if (type === 'end') {
	                year = year + 2;
	            }
	            month = month > 9 ? month : '0' + month;
	            day = day > 9 ? day : '0' + day;
	            return `${year}-${month}-${day}`;
	        }
</script>

<style scoped lang="scss">
	 .birthday{
		 .line{
		    height: 1px;
		    background-color: #252731;
		 }
		 .uni-list-cell{
			 display: flex;
			 align-items: center;
			 margin-top: 40rpx;
			 background-color:  #4A4C52;;
			 padding:20rpx 0;
			 .uni-list-cell-left{
				 margin-right: 30rpx;
			 }
			 .uni-list-cell-db{
				 flex: 1;
			 }
		 }
	 }      
</style>
